<template>
  <div id="app">
    <ul style="list-style: none;" v-show="$route.meta.show">
      <li>
        <!-- router-link to指定链接的路径 本质是a 链接 -->
        <!-- <router-link to="/shouye">去首页</router-link> -->
        <router-link to="/shaerzi">首页</router-link>
      </li>
      <li>
        <!-- router-link to可以变为动态 对应的值为对象 对象的属性为name时 对应的值是路由组件的名字
        对象的值为path时 对应的是路由组件的路径 -->
        <router-link :to="{name:'fenlei'}">去分类</router-link>
      </li>
      <li>
        <router-link :to="{path:'/car'}">购物车</router-link>
      </li>
      <li>
        <router-link to="/personcenter">个人中心</router-link>
      </li>
      <li>
        <router-link :to="{name:'register'}">注册</router-link>
      </li>
      <li>
        <router-link :to="{name:'login'}">登录</router-link>
      </li>
    </ul>
    <!-- 路由内容显示的位置 -->
    <keep-alive>  
      <router-view></router-view>
    </keep-alive>
    <!-- 在同级展示多个视图 不是嵌套展示时并列  -->
    <router-view name="Content"></router-view>
    <router-view name="ContentTwo"></router-view>
    <!-- <keep-alive>
    </keep-alive>
    缓存路由组件对象
    默认情况下 是路由组件的销毁与重建 而包了缓存路由组件的组件 显示与隐藏 可以提高用户体验

    注意：对数据要求实时性比较高的情况下 就不要使用 要求不高时可以使用
    -->
  </div>
</template>

<script>
import router from './router';
export default {
  name: 'App',
  data() {
    return {
    };
  },
  mounted(){
    // 通过$route可以获取路由上的信息
    console.log(this.$router);
  },
  components: {
    router
}
}

</script>

<style lang="less" scoped>
</style>
